<template>
    <div>
        <ul>
            <li v-for="(item,index) in memberList" @click="memberDetailShow(index)">
                <span>{{item.custName}}</span>
                <span>{{item.age}}</span>
                <span>{{item.joinTime}}</span>
            </li>
        </ul>
        <template v-for="item in list">
            <p>{{item.content}}</p>
            <img :src="item.img" alt="">
            <p class="divider"></p>
        </template>
        <table>
            <template>
                <tr>
                    <td v-for="(value,key,index) in memberDetail">{{key}}</td>
                </tr>
                <tr>
                    <td v-for="(value,key,index) in memberDetail">{{value}}</td>
                </tr>
            </template>
        </table>
        <span v-for="n in 10">{{ n }}</span>
    </div>
</template>

<script>
    export default {
      created () {
            // 就当看作是ajax在初始化进入的时候从后台获取的用户列表数据
        this.memberList = [
                { custName: 'ziksang1', age: 20, joinTime: '2014-01-02', custId: 1 },
                { custName: 'ziksang2', age: 21, joinTime: '2014-01-03', custId: 2 },
                { custName: 'ziksang3', age: 22, joinTime: '2014-01-04', custId: 3 },
                { custName: 'ziksang4', age: 23, joinTime: '2014-01-05', custId: 4 }
        ]
        this.memberDetail = {
          name: 'ziksang',
          age: 20,
          address: 'xxx省xxxx市',
          tel: '15921898427'
        }
      },
      data () {
        return {
          memberList: [],
          list: [
                    { content: 'ziksang', img: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1301074775,1382810875&fm=80&w=179&h=119&img.JPEG' },
                    { content: 'ziksang2', img: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1312092207,1376369244&fm=80&w=179&h=119&img.JPEG' }
          ],
          memberDetail: {}
        }
      },
      methods: {
        memberDetailShow (index) {
          sessionStorage.custId = this.memberList[index].custId
        }
      }
    }

</script>
<style>
    body,
    html {
        width: 100%;
        height: 100%
    }

    .divider {
        width: 100%;
        height: 1px;
        background: black;
    }
</style>
